<template>
	<view class="content">
		<!-- 头部第一部分 -->
		<view class="DistrHeader">
			<u-search class="seach" placeholder="请输入姓名或者电话号码" margin="14rpx 0" search-icon="searchIcon" v-model="keyword">
			
			</u-search>
			<u-subsection bgColor="#ffffff" buttonColor="#D4ECFC" active-color="#0199FE" current="0" :list="['启用', '禁用']"></u-subsection>
		</view>
		
		<!-- 第二部分内容 -->
		
		<view class="u-demo DistrCheck">
			<view class="u-demo-wrap">
				<view class="u-demo-area">
					<view class="">
						<u-checkbox-group :size="size"
							:wrap="wrap"
							@change="checkboxGroupChange" 
							:activeColor="activeColor"
						>
							<u-checkbox @change="checkboxChange"
								v-model="item.checked" v-for="(item, index) in list" 
								:key="index" :name="item.name"
								:disabled="item.disabled"
								:label-disabled="labelDisabled"
							>
							<view class="checkboxList">
								<view class="name">
									姓名：{{item.name}}
								</view>
								<view class="phone">
									电话：{{item.phone}}
								</view>
								
								<u-checkbox style="flex: 0 0 188rpx;" @change="checkboxChange2"
								v-model="item.checked2"
								:name="item.name2"
								:disabled="item.disabled2"
								:shape="shape2"
								>{{item.name2}}</u-checkbox>
							</view>
							</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 第三部分禁用添加 -->
		<view class="btmmAdd">
			<view class="add">
				<view class="left btn">
					禁用
				</view>
				<view class="right btn" @click="toAdddistri">
					新增
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						name: '张静雪',
						phone:'12345678911',
						checked: false,
						disabled: false,
						checked2:false,
						disabled2:false,
						name2:'默认配送'
					},
					{
						name: '刘雨',
						phone:'12345678911',
						checked: false,
						disabled: false,
						checked2:false,
						disabled2:false,
						name2:'默认配送'
					},
					{
						name: '张静雪',
						phone:'12345678911',
						checked: false,
						disabled: false,
						checked2:false,
						disabled2:false,
						name2:'默认配送'
					},
					{
						name: '张静雪',
						phone:'12345678911',
						checked: false,
						disabled: false,
						checked2:false,
						disabled2:false,
						name2:'默认配送'
					}
				],
				keyword:'',
				searchIcon:'none',
				disabled: false,
				checked: true,
				activeColor: '#2979ff',
				size: 34,
				wrap: true,
				shape2:"circle",
				labelDisabled:true
			}
		},
		computed: {
		},
		methods: {
			maxChange(index) {
				this.max = index + 1;
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				// console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				this.result = e;
			},
			checkboxChange2(e){
				
			},
			toAdddistri:function(){
				uni.navigateTo({
					url:'./addDistributor'
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.u-demo {}
	.DistrHeader{
		width: 700rpx;
		// padding-top: 15rpx;
		margin: 14rpx auto;
		.seach{
		}
	}
	.checkboxList{
		width: 660rpx;
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		background: #FFFFFF;
		line-height: 100rpx;
	}
	.DistrCheck{
		width: 700rpx;
		margin: auto;
	}
	.btmmAdd{
		position: fixed;
		bottom: 24rpx;
	}
	.add{
		display: flex;
		justify-content: space-around;
		width: 750rpx;
		.btn{
			width: 320rpx;
			height: 80rpx;
			background: #D4ECFC;
			border-radius: 40px;
			text-align: center;
			line-height: 80rpx;
		}
		.left{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #0199FE;
		}
		.right{
			background: #0199FE;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
